<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三大特性</title>
    <style>
        /* 1、层叠性 */
        .div1 ul li {
            color: royalblue;
        }

        .div1 ul li {
            color: salmon;
        }

        /* 2、继承性 */
        .div2 {
            background-color: rgb(114, 167, 202);
            /* font-size: 20px; */
            color: springgreen;
            font: 20px/1.5 'Microsoft YaHei';
            /* 这个 1.5 是当前元素文字大小 font-size 的1.5倍 */
        }

        .div2 p {
            font-size: 14px;
            /* 此时行高为 1.5 * 14px  */
        }

        /* 3、优先级 */
        .tab1 {
            width: 600px;
        }

        .div3 .test1 {
            color: rgb(79, 34, 163);
        }

        .div3 div {
            color: rgb(217, 231, 167);
        }

        .div3 #div3_1 {
            color: chartreuse !important;
        }

        /* ul li 权重 0,0,0,1  +   0,0,0,1  = 0,0,0,2 */
        ul li {
            color: red;
        }

        /* li 的权重 0,0,0,1  */
        li {
            color: pink;
        }

        /* .nav li 权重 0,0,1,0  +  0,0,0,1  =  0,0,1,1  */
        .nav li {
            color: blueviolet;
        }
    </style>
</head>

<body>
    <h2>CSS有三个重要特性：层叠性、继承性、优先级</h2>
    <h4>1、层叠性</h4>
    <div class="div1">
        <p>相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突问题</p>
        <h4>层叠性原则：</h4>
        <ul>
            <li>样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式</li>
            <li>样式不冲突，不会层叠</li>
        </ul>
    </div>
    <h4>2、继承性</h4>
    <div class="div2">
        <p>继承父类的颜色及字体等属性</p>
        <p>龙恒隆，逢生凤</p>
    </div>

    <h4>3、优先级</h4>
    <div class="div3">
        <p>当一个元素指定多个选择器，就会有优先级的产生</p>
        <ul>
            <li>选择器相同，则执行层叠性</li>
            <li>选择器不同，则根据选择器权重执行</li>
        </ul>
        <p>选择器权重如下：</p>
        <!-- <img src="imgs/CSS优先级权重.png" alt="图片加载失败"> -->
        <table class="tab1" border="1">
            <thead>
                <tr>
                    <th>选择器</th>
                    <th>选择器权重</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>继承 或者 * </td>
                    <td>0,0,0,0</td>
                </tr>
                <tr>
                    <td>元素选择器</td>
                    <td>0,0,0,1</td>
                </tr>
                <tr>
                    <td>类选择器，伪类选择器</td>
                    <td>0,0,1,0</td>
                </tr>
                <tr>
                    <td>ID选择器</td>
                    <td>0,1,0,0</td>
                </tr>
                <tr>
                    <td>行内样式 style=""</td>
                    <td>1,0,0,0</td>
                </tr>
                <tr>
                    <td>!important 重要的</td>
                    <td>无穷大</td>
                </tr>
            </tbody>
        </table>
        <p>实例：</p>
        <div class="test1" id="div3_1">
            你笑起来真好看
            <p style="color: crimson;">你笑起来真好看</p>
        </div>
        <strong>复合选择器：会有权重叠加的问题,但不会进位</strong>
        <div class="test2">
            <ul class="nav">
                <li>大猪蹄子</li>
                <li>大猪蹄子</li>
                <li>大猪蹄子</li>
            </ul>
        </div>
    </div>

</body>

</html>